<template>
  <el-dialog
      title="模板删除"
      :visible.sync="visible"
      :with-header="false"
      custom-class="layer_wrap select_video"
      :before-close="()=>handleClose()"
  >
    <div class="layer_inside">
      <el-button @click="handleToggleSelection([tableData[1]])" v-if="false">切换第二的选中状态</el-button>
      <div class="layer_header">
        <span class="title">选择素材</span>
        <i class="el-icon-close" @click="()=>handleClose()"/>
      </div>
      <div class="layer_main_wrap">
        <el-tabs type="border-card" class="textarea-video" v-model="tabName">
          <el-tab-pane label="文本" name="textarea">
            <div class="layer_video_main">
              <Editor v-model="content" :min-height="460" @on-change="backContent"/>
            </div>
          </el-tab-pane>
          <el-tab-pane label="图片" name="picture">
            <div class="layer_video_main">
              <el-table
                  border
                  ref="elTable1"
                  :data="tableData"
                  class="table-area"
                  height="400"
                  :row-key="(row) => row.id"
                  @select="handleSelectRow"
              >
                <el-table-column type="selection" :reserve-selection="true"/>
                <el-table-column
                    prop="name"
                    label="素材名称"
                >
                  <template v-slot="scope">
                    <div class="name-inside" slot="reference"> {{ (scope.row.name) }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="素材类型"
                    width="280"
                >
                  <template v-slot="scope">
                    <div>{{ scope.row.type }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="创建时间"
                >
                  <template v-slot="scope">
                    <div>{{ scope.row.createTime }}</div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" v-if="false">
                  <template v-slot="scope">
                    <el-row class="operator-box">
                      <el-col :push="8" :span="8" class="edit item" title="预览">
                        预览
                      </el-col>
                    </el-row>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="视频" name="video">
            <div class="layer_video_main">
              <el-table
                  border
                  ref="elTable2"
                  :data="tableData"
                  class="table-area"
                  height="400"
                  :row-key="(row) => row.id"
                  @select="handleSelectRow"
              >
                <el-table-column type="selection" :reserve-selection="true"/>
                <el-table-column
                    prop="name"
                    label="素材名称"
                >
                  <template v-slot="scope">
                    <div class="name-inside" slot="reference"> {{ (scope.row.name) }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="素材类型"
                    width="280"
                >
                  <template v-slot="scope">
                    <div>{{ scope.row.type }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="创建时间"
                >
                  <template v-slot="scope">
                    <div>{{ scope.row.createTime }}</div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" v-if="false">
                  <template v-slot="scope">
                    <el-row class="operator-box">
                      <el-col :push="8" :span="8" class="edit item" title="预览">
                        预览
                      </el-col>
                    </el-row>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

        </el-tabs>
        <div class="layer_delete_bottom">
          <el-button class="button_item cancel" @click="()=>handleClose()">取消</el-button>
          <el-button class="button_item sure" type="primary" @click="()=>handleSure()">确认</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {v4 as uuid} from "uuid";
import {ModelDesignApi} from "@/api/modeldesign";
import Editor from "@/components/public/layer/template/formEditor2"

export default {
  components: {Editor},

  props: ["visible", 'info', 'infoContent', 'multiple'],

  name: "SelectVideoText",

  data() {
    return {
      radio: 1,
      tableData: [],
      selectedRow: '',
      showLargePictore: false,
      previewList: Array(),
      pictureSrc: '',
      tabName: 'textarea',
      content: '',
      videoContent: '',
      header: require("@/components/assets/images/design/header.jpeg"),
    };
  },

  computed: {
    //生成唯一的字符串
    getOnlyId() {
      return function () {
        return uuid()
      }
    },
  },

  mounted() {
  },

  methods: {
    // 关闭
    handleClose() {
      this.$emit("handleCancel", false);
    },

    // 确认
    handleSure() {
      const self = this;
      let params = Object();
      Reflect.set(params, 'tabsName', (self.tabName))
      if (self.tabName === 'textarea') {
        if (!!self.content) {
          Reflect.set(params, 'textContent', (self.content));
          Reflect.set(params, 'pictureContent', Array());
          Reflect.set(params, 'videoContent', Array());
          this.handleClose();
          this.$emit('handleSure', params);
        } else {
          this.$message({
            type: 'warning',
            message: '请先输入文本',
          })
        }
      } else if (this.tabName === 'video') {
        if (!!(self.videoContent)) {
          Reflect.set(params, 'videoContent', (self.videoContent));
          Reflect.set(params, 'pictureContent', Array());
          Reflect.set(params, 'textContent', '');
          Reflect.set(params, 'tabName', (self.tabName));
          this.handleClose();
          this.$emit('handleSure', params);
        } else {
          this.$message({
            type: 'warning',
            message: '请先选择视频',
          })
        }
      } else if (self.tabName === 'picture') {
        if (!!(self.pictureContent)) {
          Reflect.set(params, 'videoContent', Array());
          Reflect.set(params, 'pictureContent', self.pictureContent);
          Reflect.set(params, 'textContent', '');
          Reflect.set(params, 'tabName', (self.tabName));
          this.handleClose();
          this.$emit('handleSure', params);
        } else {
          this.$message({
            type: 'warning',
            message: '请先选择视频',
          })
        }

      }
    },

    // select方法
    handleSelectRow(selection, val) {
      const self = this;
      if (self.multiple) {
        self.selectedRow = [...selection];
        if (self.tabName === 'picture') {
          self.pictureContent = [...this.selectedRow];
        } else if (self.tabName === 'video') {
          self.videoContent = [...this.selectedRow];
        }
      } else {
        // 接收两个参数，selection为所有选中数据的集合，val为当前选择的数据
        // 先将所有选中的数据变为未选中状态
        let elTable = self.tabName === 'picture' ? 'elTable1' : 'elTable2'
        self.$refs[elTable]?.clearSelection();
        // 如果选择完当前数据后selection为空数组，说明现在是取消勾选，无选中数据
        if (selection.length === 0) {
          if (self.tabName === 'video') {
            self.videoContent = [];  // 清空data中绑定的selectedRow
          } else {
            self.pictureContent = [];  // 清空data中绑定的selectedRow
          }
          return
        }
        // 切换最近一次选择数据的状态
        self.handleToggleSelection([val], elTable)
        if (self.tabName === 'video') {
          self.videoContent = [val];
        } else {
          self.pictureContent = [val];
        }
      }
    },

    // 接收回传的内容
    backContent(val) {
      let {html} = val;
      this.content = html
    },


    // 会显选中的数据
    handleToggleSelection(rows, tableRef) {
      console.log('进入选中的函数')
      if (rows) {
        rows.forEach((row) => {
          // 切换选中状态
          this.$refs[tableRef].toggleRowSelection(row, true)
        })
      } else {
        // 清空选中
        this.$refs[tableRef].clearSelection()
      }
    },

  },

  watch: {
    // 切换Tabs
    tabName: {
      handler: async function (val) {
        const self = this;
        self.tableData = Array();
        let params = Object();
        Reflect.set(params, 'name', '');
        Reflect.set(params, 'deptIds', Array());
        Reflect.set(params, 'pageNum', '1');
        Reflect.set(params, 'pageSize', '9999');
        switch (val) {
          case 'video':
            Reflect.set(params, 'classification', 'video');
            break
          case 'picture':
            Reflect.set(params, 'classification', 'image');
            break
        }
        try {
          const resp = await ModelDesignApi.getAllMaterial(params);
          if (resp && (resp.code) === 200) {
            self.$nextTick(() => {
              let rows = Array();
              // 定义更新具体的表格
              // console.log(val)
              let tableRef;
              if (val === 'picture') {
                tableRef = 'elTable1'
                rows = this.pictureContent
              }
              if (val === 'video') {
                tableRef = 'elTable2'
                rows = this.videoContent
              }
              const rowIds = self.$lodash.map(rows, 'id');
              // 选中的对象
              let selectionInfo = self.$lodash.filter(resp.data, function (items) {
                return rowIds.includes(items.id);
              });
              // console.log(selectionInfo)
              // console.log(tableRef)
              this.handleToggleSelection(selectionInfo, tableRef)
            })
            this.tableData = (resp.data);
          }
        } catch (e) {
          let {data} = (e.response);
          console.log(data)
        }
      },
      deep: true,
      immediate: false,
    },

    // 写入文本域
    infoContent: {
      handler: async function (val) {
        if (!!val) {
          this.tabName = val.tabsName;
          this.content = val.textContent;
          this.pictureContent = val.pictureContent;
          this.videoContent = val.videoContent;
        }
      },
      deep: true,
      immediate: true,
    },
  }
};
</script>


<style lang="scss">
.select_video {
  width: 1080px !important;

  .table-area th.el-table__cell .el-checkbox {
    display: none;
  }
}
</style>

<style lang="scss" scoped>
@import "@/components/assets/style/layer";
@import "./assets/style";
</style>



